<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <span>{{message}}</span>
  </div>
</body>
    <script>
    function complier(template, data) {
      let kk = /\{\{(.+?)\}\}/g
      let childNodes = template.childNodes 
      for (let i = 0; i < childNodes.length; i++) {
        let type = childNodes[i].nodeType 
        if (type === 3) {
          let txt = childNodes[i].nodeValue 
          txt = txt.replace(kk, function(_, g){
            let key = g.trim()
            let value = data[key]
            return value
          })
          childNodes[i].nodeValue = txt
        }
        else if (type === 1) { 
          complier(childNodes[i], data)
        }
      }
    }
    
    function Yvue (options) {
      this._data = options.data
      this._el = options.el

      // 准备
      this.$el = this._templateDom = document.querySelector(this._el)
      this._parent = this._templateDom.parentNode
      this.render()
    }
    // 模板 ，得到html 加到页面中去
    Yvue.prototype.render = function () {
      this.compiler()
    }

    Yvue.prototype.compiler = function(tepNode) {
      let realHtmlDom = this._templateDom.cloneNode(true)
      complier(realHtmlDom, this._data)
      this.upData(realHtmlDom)
    }

    Yvue.prototype.upData = function (real) {
      this._parent.replaceChild(real,document.querySelector(this._el))
    }
    
    let app = new Yvue({
      el: '#root',
      data: {
        name: 'ss',
        message: 'sss'
      },
    })
    </script>
</html>